<template>
  <div id="app" class="layout">
    <Layout>
        <Header :style="{width: '100%', height: 'auto',padding:'0px'}">
          <div class="hd">
            <h1>管理系统</h1>
          </div>
          <div class="nav">
            <Menu mode="horizontal" theme="dark" active-name="1" @on-select="menuClick">
              <MenuItem :name="item.routerName" v-for="(item, index) in nav">
                <svg class="icon" aria-hidden="true">
                    <use :xlink:href="'#icon-'+item.icon"></use>
                </svg>
                  {{item.name}}
              </MenuItem>
          </Menu>
          </div>
        </Header>
        <Content>
            <router-view></router-view>
        </Content>
    </Layout>
  </div>
</template>

<script>
export default {
  data () {
    return {
      nav:[
        {name: "统计", icon: "tongji", routerName: "tj"},
        {name: "应用", icon: "yingyong", routerName: "yy"},
        {name: "人群", icon: "duixiangdongtaiguankong", routerName: "rq"},
        {name: "云盘", icon: "jintian", routerName: "yp"}
      ]
    }
  },
  methods:{
    menuClick(routerName) {
      this.$router.push("/"+routerName);
    }
  }
}
</script>

<style scoped>
.icon {
   width: 14px; height: 14px;
   vertical-align: -0.15em;
   fill: #FFF;
   overflow: hidden;
   color: #FFF;
}
.hd{
  color: #FFF;
}
.hd h1{
  padding: 0px 20px;
}
</style>
